import Taro, { Component, Config } from '@tarojs/taro';
import { ComponentClass } from 'react';
import { connect } from '@tarojs/redux';
import { View, Text, Swiper, SwiperItem } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import { add, minus, asyncAdd } from '../../actions/counter'

import Indector from '../../components/indector/index'
import SwiperCar from '../../components/swiperCar/index'
import Modal from '../../components/modal/index'

import './index.less'
type PageStateProps = {
  counter: {
    num: number
  }
}
type PageDispatchProps = {
  add: () => void;
  dec: () => void;
  asycadd: () => any;
}
type PageOwnProps = {}
type PageState = {
  pagename: string;
  door1isOpen: boolean;
  intectorArrays: number[];
  currentItemId: string;
  fireText: string;
  isStart: boolean;
  ishsowModal: boolean;
  isFired: boolean;
}
type Iprops = PageStateProps & PageOwnProps & PageDispatchProps
interface ControlCar {
  props: Iprops;
  state: PageState
}

@connect(({ counter }) =>
  ({ counter })
  , (dispatch) => ({
    add() {
      dispatch(add())
    },
    dec() {
      dispatch(minus())
    },
    asycadd() {
      dispatch(asyncAdd())
    }
  }))
class ControlCar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pagename: '控车',
      door1isOpen: false,
      intectorArrays: [1,2,3],
      currentItemId: '1',
      fireText: 'START',
      isStart: false,
      ishsowModal: true,
      isFired: false,
    }
  }
  config: Config = {
    navigationBarTitleText: '控车',
    navigationBarBackgroundColor: '#282e3e',
    navigationBarTextStyle: "white",
  }
  modal: any;
  refmodal = (node) => this.modal = node; //this.modal会变成 'Model' 的实例组件应用

  //渲染函数
  render() {
    return (
      <View className="container">
        {<Modal ref={this.refmodal}>
        </Modal>}
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          onChange={this.swiperchange}
          // indicatorDots
          >
          <SwiperItem itemId='1'>
            <View className='demo-text-1'>
              <SwiperCar isactive={this.state.door1isOpen} />
            </View>
          </SwiperItem>
          <SwiperItem itemId='2'>
            <View className='demo-text-2'>2</View>
          </SwiperItem>
          <SwiperItem itemId='3'>
            <View className='demo-text-3'>3</View>
          </SwiperItem>
        </Swiper>
        <Indector
          intectorArrays = {this.state.intectorArrays}
          currentItemId = {this.state.currentItemId}
        />
        <View className="status-top">
          <View className="batteryvolatage">
            <View className="batteryvolatage-value">12.28</View>
            <View className="batteryvolatage-text">电瓶电压</View>
          </View>
          <View className="insideTemp">
            <View className="insideTemp-value">23</View>
            <View className="insideTemp-text">车内温度</View>
          </View>
        </View>
        <View className="status-bottom">
          <View className="gpsinfo">
            <View className="gpsinfo-value">弱</View>
            <View className="gpsinfo-text">GPS信号</View>
          </View>
          <View className="devicestatus">
            <View className="devicestatus-value">离线</View>
            <View className="devicestatus-text">设备状态</View>
          </View>
          <View className="internetinfo">
            <View className="internetinfo-value">强</View>
            <View className="internetinfo-text">网络信号</View>
          </View>
        </View>
        <View className="control-container">
          <View className="windowControl">
            <View className="sc">
              <Text className="sc-text text">升窗</Text>
              <AtIcon value='chevron-up' size={23} color='#0070C0'></AtIcon>
            </View>
            <View className="cline b-m"></View>
            <View className="jc">
              <Text className="jc-text text">降窗</Text>
              <AtIcon value='chevron-down' size={23} color='#0070C0'></AtIcon>
            </View>
          </View>
          <View className="fireControl">
            <View className={this.state.isFired ? 'fireCirle active' : 'fireCirle'} onClick={this.fire}>
              <View className={this.state.isFired ? 'insideCircle active' : 'insideCircle'}>
                <View className="line"></View>
                <Text className="fire-text">{this.state.fireText}</Text>
              </View>
            </View>
          </View>
          <View className="lockControl">
            <View className="slock" onClick={this.lockCar}>
              <Text className="sc-text text">上锁</Text>
              <Text className="iconfonts slock"></Text>
            </View>
            <View className="cline b-m"></View>
            <View className="jlock" onClick={this.unlockCar}>
              <Text className="jlock-text text">解锁</Text>
              <Text className="iconfonts cancellock"></Text>
            </View>
          </View>
        </View>
        <View className="other-button">
          <Text className="cmd-wx" onClick={this.openTailbox}>尾箱</Text>
          <Text className="cmd-call">寻车</Text>
        </View>
      </View>
    )
  }
  //方法
  gotoLogin = (): void => {
    Taro.navigateTo({
      url: '../login/index'
    })
  }
  openDoor = (): void=> {
    this.setState({
      door1isOpen: !this.state.door1isOpen
    })
  }
  swiperchange = (e): void => {
    this.setState({
      currentItemId: e.detail.currentItemId
    })
  }

  //上锁
  lockCar () {
    this.modal.show({
      title: '操作提示',
      content: '您的爱车【渝AGT888】将于2018年8月10日使用到期，为不影响功能使用，请及时续费。',
      success: res => {
        console.log(res);
        if(res.confirm) {
          console.log('点击了确定按钮 111')
          this.setState({
            door1isOpen: false,
          })
        } else if(res.cancel) {
          console.log('点击了取消按钮 222');
        }
      }
    });
  }

  //解锁
  unlockCar () {
    this.setState({
      childrentype: 2,
    })
    this.modal.show({
      title: '操作提示',
      content:'是否进行解锁操作',
      success: res => {
        console.log(res);
        if (res.confirm) {
          console.log('点击了确定按钮 111')
          this.setState({
            door1isOpen: true,
          })
        } else if (res.cancel) {
          console.log('点击了取消按钮 222');
        }
      }
    });

  }
  //点火熄火操作
  fire = ():void => {
    if(this.state.fireText == 'START') {
      this.modal.show({
        title: '启动操作',
        mintitle: '(启动时长)',
        cancaleBtnText: '启动并解锁',
        submitBtnText: '启动不解锁',
        modalCtxType: 'timing',
        success: res=> {
          if (res.confirm) {
            console.log('启动不解锁')
            this.setState({
              isFired: true
            })
          } else if (res.cancel) {
            console.log('启动并解锁')
          }
        }
      })
      this.setState({
        fireText: 'STOP',
        isStart: true
      })
    } else {
      this.setState({
        fireText: 'START'
      })
    }
  }

  //开启尾箱
  openTailbox(): void {
    this.modal.show({
      title: '安全码验证',
      modalCtxType: 'passwordverify',
      haveButton: false,
      success:(res)=> {
        console.log(res);
        if(res.inputDone) {
          Taro.showToast({
            title: '正在验证',
            icon:'loading',
            duration: 3000
          })
        }
      }
    })
  }
}

export default ControlCar as ComponentClass<PageOwnProps, PageState>


